<template>
  <div>
    <Row class="y_query_right">
      <Button type="primary" icon="md-add" @click="showAddModal()" class="y_condition">新增</Button>
    </Row>
    <Divider size="small"/>
    <Row class="y_query_right">
<!--      <Button type="primary" @click="testAdd()" class="y_condition">测试新增</Button>-->
<!--      <Divider size="small"></Divider>-->
      <Input v-model.trim="searchParam.shopName" placeholder="供货商名称或编号" class="y_condition" clearable></Input>
      <Select v-model="searchParam.platform" class="y_condition" style="text-align: left;" clearable placeholder="平台">
        <Option v-for="(item, index) in dict.productSources" :key="index" :value="item.label">{{item.label}}</Option>
      </Select>
      <Select v-model="searchParam.level" class="y_condition" style="text-align: left;" clearable placeholder="供货商评分">
        <Option :value="1">小于4分</Option>
        <Option :value="2">4-6分</Option>
        <Option :value="3">大于6分</Option>
      </Select>
      <Select v-model="searchParam.hasBanned" class="y_condition" style="text-align: left;" clearable placeholder="是否已屏蔽">
        <Option :value="0">未屏蔽</Option>
        <Option :value="1">已屏蔽</Option>
      </Select>
      <Input v-model.trim="searchParam.tag" placeholder="标签" clearable class="y_condition"></Input>
      <Button type="primary" icon="md-search" class="y_condition" @click="search()">查询</Button>
    </Row>

<!--    <Table :columns="tableColumns" :data="shopList" @on-selection-change="changeSelectedRows" border style="margin-top: 20px;"></Table>-->
    <List border class="supplier-list">
      <div v-if="shopList.length > 0">
        <ListItem v-for="(item, index) in shopList" :key="item.id" class="list_item">
          <div class="item_top">
            <p style="font-weight: bold">{{ item.shopName }}<Tag v-if="item.hasBanned" color="gray" style="margin-left: 10px;">已屏蔽</Tag></p>
          </div>

          <div style="text-align: left;">
            <KeyValueView title="编号" :value="item.id"></KeyValueView>
            <KeyValueView title="评分" :value="item.grade+'分'"></KeyValueView>
            <KeyValueView v-if="item.tags.length > 0" title="标签"> {{item.tags.join("，")}} </KeyValueView>


          <br>
            <KeyValueView title="店铺链接">
              <a :href="item.shopUrl" target="_blank">点击访问</a>
            </KeyValueView>
            <KeyValueView title="联系卖家" v-if="isNotEmpty(item.sellerName)">
              <a :href="item.sellerChat" target="_blank">{{item.sellerName}}</a>
            </KeyValueView>
            <KeyValueView title="地址" :value="item.location"></KeyValueView>
            <KeyValueView title="平台" :value="item.platform"></KeyValueView>
            <KeyValueView title="年限" :value="isNotEmpty(item.years)?(item.years+'年'):''"></KeyValueView>
            <KeyValueView title="交易勋章" :value="item.sellScore"></KeyValueView>
          </div>
          <div v-if="isNotEmpty(item.remark)">
            <span style="color: #999; vertical-align: top;">备注：</span>
            <span class="base_value"><pre style="display: inline-block; margin: 0; text-align: left;">{{item.remark}}</pre></span>
          </div>
          <div v-if="item.hasBanned && item.banInfo!=null" style="background: #f5f5f5;padding: 0.2rem 0.5rem;margin: 0.5rem 0">
            <KeyValueView title="屏蔽人" :value="item.banInfo.employeeName"></KeyValueView>
            <KeyValueView title="屏蔽时间" :value="$tiyBJTime(item.banInfo.banTime)"></KeyValueView>
            <KeyValueView title="屏蔽原因" :value="item.banInfo.reason"></KeyValueView>
          </div>
          <div class="item_bottom">
            <Button type="warning" icon="md-undo" size="small" @click="removeFromBlacklist(item.id)" v-if="item.hasBanned">取消屏蔽</Button>
            <Button type="error" icon="md-eye-off" size="small" @click="showBanModal(item.id)" v-else>屏蔽</Button>
            <Button type="primary" icon="md-create" size="small" @click="showModifyModal(item)">修改</Button>
          </div>
        </ListItem>
      </div>
      <div v-else>
        <ListItem>
          <div style="width: 100%; text-align: center; color: #ccc;">暂无数据</div>
        </ListItem>
      </div>
    </List>
    <div style="text-align: right; margin-top: 20px;">
      <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum" @on-change="pageNumChange"
            @on-page-size-change="pageSizeChange" :page-size-opts="page.options"
            show-sizer show-elevator show-total></Page>
    </div>

    <!-- 修改供货商 -->
    <Modal v-model="status.modifyModal.isShow" title="修改供货商信息" :mask-closable="false" width="800">
      <Form ref="modifyForm" :model="modifyParam" :label-width="120" inline label-colon :show-message="false">
        <FormItem label="店铺编号">
          {{modifyParam.id}}
        </FormItem>
        <FormItem label="店铺名称" class="one-line" prop="shopName" required>
          <Input type="text" v-model="modifyParam.shopName" class="input-large"></Input>
        </FormItem>

        <FormItem label="店铺链接" class="one-line" prop="shopUrl" required>
            <Input type="text" v-model="modifyParam.shopUrl" style="width: 80%"></Input>
            <a :href="modifyParam.shopUrl" target="_blank" :title="modifyParam.shopUrl" style="padding: 0 1rem" v-if="isNotEmpty(modifyParam.shopUrl)">访问</a>
        </FormItem>

        <FormItem label="联系卖家" class="one-line">
          <Input type="text" v-model="modifyParam.sellerName" style="width: 15%" placeholder="卖家姓名"></Input>
          <Input type="text" v-model="modifyParam.sellerChat" style="width: 70%" placeholder="卖家链接"></Input>
            <a :href="modifyParam.sellerChat" target="_blank" :title="modifyParam.sellerChat" style="padding: 0 1rem" v-if="isNotEmpty(modifyParam.sellerChat)">访问</a>
        </FormItem>

        <FormItem label="标签" class="one-line">
          <Select v-model="modifyParam.tags" multiple filterable allow-create @on-create="createModifyTag" placeholder="标签" class="input-large">
            <Option v-for="(item, index) in status.modifyModal.tags" :value="item">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="评分">
          <Input type="number" v-model="modifyParam.grade" class="input-middle"></Input>
        </FormItem>
        <FormItem label="年限">
          <Input type="number" v-model="modifyParam.years" class="input-middle"></Input>
        </FormItem>
        <FormItem label="地址">
          <Input type="text" v-model="modifyParam.location" class="input-middle"></Input>
        </FormItem>
        <FormItem label="交易勋章">
          <Input type="text" v-model="modifyParam.sellScore" class="input-middle"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" v-model="modifyParam.remark" class="input-large" placeholder="内部, 可中文"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideModifyModal()">取消</Button>
        <Button type="primary" @click="editShop()">保存</Button>
      </div>
    </Modal>

    <!-- 新增供货商 -->
    <Modal v-model="status.addModal.isShow" title="新增供货商" :mask-closable="false" width="800">
      <Form ref="addForm" :model="addParam" :label-width="120" inline label-colon :show-message="false">
        <FormItem label="平台" prop="platform" required>
          <Select v-model="addParam.platform" class="input-middle">
            <Option value="1688">1688</Option>
            <Option value="淘宝">淘宝</Option>
            <Option value="拼多多">拼多多</Option>
          </Select>
        </FormItem>
        <FormItem label="店铺名称" class="one-line" prop="shopName" required>
          <Input type="text" v-model="addParam.shopName" class="input-large"></Input>
        </FormItem>
        <FormItem label="店铺链接" class="one-line" prop="shopUrl" required>
          <Input type="text" v-model="addParam.shopUrl" style="width: 80%"></Input>
          <a :href="addParam.shopUrl" target="_blank" :title="addParam.shopUrl" style="padding: 0 1rem" v-if="isNotEmpty(addParam.shopUrl)">访问</a>
        </FormItem>
        <FormItem label="联系卖家" class="one-line">
          <Input type="text" v-model="addParam.sellerName" style="width: 15%" placeholder="卖家姓名"></Input>
          <Input type="text" v-model="addParam.sellerChat" style="width: 70%" placeholder="卖家链接"></Input>
          <a :href="addParam.sellerChat" target="_blank" :title="addParam.sellerChat" style="padding: 0 1rem" v-if="isNotEmpty(addParam.sellerChat)">访问</a>
        </FormItem>
        <FormItem label="标签" class="one-line">
          <Select v-model="addParam.tags" multiple filterable allow-create @on-create="createAddTag" placeholder="标签" class="input-large">
            <Option v-for="(item, index) in status.addModal.tags" :value="item">{{item}}</Option>
          </Select>
        </FormItem>
        <FormItem label="评分">
          <Input type="number" v-model="addParam.grade" class="input-middle"></Input>
        </FormItem>
        <FormItem label="年限">
          <Input type="number" v-model="addParam.years" class="input-middle"></Input>
        </FormItem>
        <FormItem label="地址">
          <Input type="text" v-model="addParam.location" class="input-middle"></Input>
        </FormItem>
        <FormItem label="交易勋章">
          <Input type="text" v-model="addParam.sellScore" class="input-middle"></Input>
        </FormItem>
        <FormItem label="备注">
          <Input type="textarea" v-model="addParam.remark" class="input-large" placeholder="内部, 可中文"></Input>
        </FormItem>
        <FormItem label="是否屏蔽" class="one-line" prop="hasBanned" required>
          <Checkbox v-model="addParam.hasBanned" style="vertical-align: top;"></Checkbox>
        </FormItem>
        <FormItem label="屏蔽原因" class="one-line" prop="banInfo.reason" v-show="addParam.hasBanned">
          <Input type="textarea" v-model="addParam.banInfo.reason" :rows="5" placeholder="屏蔽原因" class="input-large"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideAddModal()">取消</Button>
        <Button type="primary" @click="addShop()">保存</Button>
      </div>
    </Modal>

    <!-- 供货商屏蔽原因 -->
    <Modal v-model="status.banModal.isShow" title="屏蔽原因" :mask-closable="false">
      <Form ref="banForm" :label-width="100" inline label-colon>
        <FormItem label="屏蔽原因">
          <Input type="textarea" v-model="banParam.reason" :rows="5" style="width: 350px;"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="hideBanModal()">取消</Button>
        <Button type="primary" @click="banSupplier()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import supplierData from "./js/supplier/supplierData";
import {
  initPageInfo,
  addToBlacklist,
  deleteSupplier,
  querySupplierList,
  removeFromBlacklist,
  updateSupplier, addSupplier
} from "./js/supplier/supplierFuns";
import axios from "axios";
import qs from "qs";
import Vue from "vue";
import KeyValueView from "../widgets/KeyValueView";
import {isNotEmpty} from "../js/commonUtils";
import productData from "./js/product/productData";
export default {
  name: "SupplierList",
  components: {KeyValueView},
  data() {
    return {
      searchParam: supplierData.tParam.searchParam,
      shopList: supplierData.tData.list,
      modifyParam: supplierData.tParam.modifyParam,
      addParam: supplierData.tParam.addParam,
      banParam: supplierData.tParam.banParam,
      status: supplierData.tStatus,
      page: supplierData.tPage.listPage,
      dict: productData.dict,
      testData: {
        shopName: "GIRL实力旗舰店",
        shopUrl: "https://shop0rk770l431849.1688.com",
        years: "3年",
        sellerName: "陈芳",
        sellerChat: "https://me.1688.com/*xC-i2FQyvC8bvG8bMml*MzZlZQTT.html",
        sellScore: "交易勋章-AAA级",
        location: "广东 广州",
      }
    }
  },
  computed: {
    tableColumns() {
      let self = this;
      return [
        {type: "selection", width: 60, fixed: "left"},
        {title: "序号", width: 80, align: "center", type: "index", fixed: "left"},
        {title: "店铺名称", minWidth: 200, align: "center", key: "shopName", fixed: "left"},
        {title: "店铺链接", width: 300, align: "center", key:"shopUrl"},
        {title: "卖家", width: 150, align: "center", key:"sellerName"},
        {title: "联系卖家", width: 300, align: "center", key:"sellerChat"},
        {title: "地址", width: 200, align: "center", key:"location"},
        {title: "年限", width: 100, align: "center", key:"years"},
        {title: "交易勋章", width: 150, align: "center", key:"sellScore",
          // render: function(h, params){
          //   return h("Rate", {
          //     props: {
          //       count: 5,
          //       value: params.row.medal
          //     }
          //   }, "");
          // }
        },
        {title: "评分", width: 150, align: "center", render: function (h, params) {
            return h("span", params.row.grade+"分");
          }
        },
        {title: "创建时间", width: 200, align: "center", render: function (h, params) {
            return h("span", self.$tiyBJTime(params.row.createTime));
          }
        },
        {title: "操作", width: 150, align: "center", fixed:"right", render: function (h, params) {
            return h("div", [
              h("Button", {
                props: {type: 'primary', size: 'small', icon: "md-create"},
                style: {marginRight: '10px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.showModifyModal(params.row);
                  }
                }
              }, "修改"),
              /*h("Button", {
                props: {type: 'error', size: 'small', icon: "md-trash"},
                style: {marginRight: '10px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.deleteSupplier(params.row.id);
                  }
                }
              }, "删除"),*/
              h("Button", {
                props: {type: 'error', size: 'small', icon: "md-trash"},
                style: {marginRight: '10px',marginTop:'6px',marginBottom:'6px'},
                on: {
                  click: () => {
                    self.showBanModal(params.row.id);
                  }
                }
              }, "屏蔽"),
            ]);
          }
        },
      ]
    },
  },
  methods: {
    search() {
      supplierData.tPage.listPage.pageNum = 1;
      querySupplierList(this);
    },
    isNotEmpty(val) {
      return isNotEmpty(val);
    },
    pageNumChange(pageNum) {
      supplierData.tPage.listPage.pageNum = pageNum;
      querySupplierList(this);
    },
    pageSizeChange(pageSize) {
      supplierData.tPage.listPage.pageNum = 1;
      supplierData.tPage.listPage.pageSize = pageSize;
      querySupplierList(this);
    },
    changeSelectedRows(selection) {

    },
    showModifyModal(row) {
      this.initShopParam(row);
      supplierData.tStatus.modifyModal.isShow = true;
    },
    hideModifyModal() {
      supplierData.tStatus.modifyModal.isShow = false;
    },
    initShopParam(shop) {
      this.$refs.modifyForm.resetFields();
      supplierData.tParam.modifyParam.id = shop.id;
      supplierData.tParam.modifyParam.platform = shop.platform;
      supplierData.tParam.modifyParam.createTime = shop.createTime;
      supplierData.tParam.modifyParam.shopName = shop.shopName;
      supplierData.tParam.modifyParam.shopUrl = shop.shopUrl;
      supplierData.tParam.modifyParam.sellerName = shop.sellerName;
      supplierData.tParam.modifyParam.sellerChat = shop.sellerChat
      supplierData.tParam.modifyParam.sellScore = shop.sellScore;
      supplierData.tParam.modifyParam.location = shop.location;
      supplierData.tParam.modifyParam.years = shop.years;
      supplierData.tParam.modifyParam.grade = shop.grade;
      supplierData.tParam.modifyParam.remark = shop.remark;
      supplierData.tParam.modifyParam.hasBanned = shop.hasBanned;
      supplierData.tParam.modifyParam.tags.splice(0);
      supplierData.tStatus.modifyModal.tags.splice(0);
      if(shop.tags != null && shop.tags.length>0) {
        supplierData.tParam.modifyParam.tags.push(...shop.tags);
        supplierData.tStatus.modifyModal.tags.push(...shop.tags);
      }
    },
    editShop() {
      updateSupplier(this);
    },
    deleteSupplier(id) {
      let self = this;
      self.$Modal.confirm({
        title: "确认",
        content: "确定要删除此供应商信息吗？",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          deleteSupplier(self, id);
        }
      });
    },
    showBanModal(id) {
      this.banParam.id = id;
      this.banParam.reason = "";
      supplierData.tStatus.banModal.isShow = true;
    },
    hideBanModal(){
      supplierData.tStatus.banModal.isShow = false;
    },
    banSupplier() {
      let self = this;
      self.$Modal.confirm({
        title: "确认",
        content: "确定要屏蔽此供应商吗？",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          addToBlacklist(self);
        }
      });
    },
    removeFromBlacklist(id) {
      let self = this;
      self.$Modal.confirm({
        title: "确认",
        content: "确定要对此供应商取消屏蔽吗？",
        okText: "确定",
        cancelText: "取消",
        onOk() {
          removeFromBlacklist(self, id);
        }
      });
    },
    formatDate(date) {
      if(date==null) {
        return "";
      }
      return Vue.prototype.$tiyBJTime(new Date(date).getTime());
    },
    createModifyTag(input) {
      supplierData.tStatus.modifyModal.tags.push(input);
    },
    showAddModal() {
      this.$refs.addForm.resetFields();
      supplierData.tStatus.addModal.isShow = true;
    },
    hideAddModal() {
      supplierData.tStatus.addModal.isShow = false;
    },
    addShop() {
      addSupplier(this);
    },
    createAddTag(input) {
      supplierData.tStatus.addModal.tags.push(input);
    },
    testAdd() {
      let url = "http://192.168.31.58:8081/adminServer/product/shop/save";
      axios.post(url, qs.stringify({json: JSON.stringify(this.testData)})).then(response => {
        console.log(response.data);
      })
    }
  },
  mounted() {
    initPageInfo();
  }
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";
.one-line {
  width: 100%;
}
.item_key{
  color: @tiyTextLightColor;
  padding: 0.3rem 0;
}
.supplier-list {
  margin: 1rem 0rem;
  line-height: 25px;
}
.list_item {
  .flex-colum-wrap;
  justify-items: left;
  align-items: start;
  .item_top{
    width: 100%;
    margin-bottom: 5px;
    .flex-row-wrap;
    justify-content: space-between;
  }

  .item_bottom{
    width: 100%;
    display: block;
    //padding: 0 1rem 0.5rem 0;
    cursor: pointer;
    text-align: right;
    button {
      margin-left: 0.5rem;
    }
  }
}
.input-large {
  width: 610px;
}
.input-middle {
  width: 240px;
}
.form-item-text {
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
